<template>
    <div class="auction_box">
        <div class="auctionList">
            <div class="msg">
                <el-tooltip effect="dark" :content=auctionData.name placement="bottom">
                    <h3 @click="goActionLots">{{auctionData.name}}</h3>
                </el-tooltip>
                <div class="phone">
                    <p>拍卖企业：河北一盟拍卖有限公司</p>
                    <p>联系电话：{{auctionData.entry_phone}}</p>
                </div>
            </div>
            <div class="search_pic">
                <div class="search">
                    <el-input size="mini" placeholder="请输入本场拍卖会的标的名称" v-model="keyWord" class="input-with-select">
                        <!-- <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="名称" value="1"></el-option>
                        <el-option label="序号" value="2"></el-option>
                        </el-select> -->
                        <el-button slot="append" icon="el-icon-search" @click="searchFilter"></el-button>
                    </el-input>
                </div>
                <div class="pic_list">
                    <i @click="go(1)" class="el-icon-arrow-left left_btn"></i>
                    <div class="pic_con">
                        <ul class="pic_ul" :style="changePic">
                            <li v-for="(val,i) in filterFruitList" :key="i" @click="onlyFilter(val)"> 
                                <em>{{val.id}}</em>
                                <img :src="imgurls+val.imgage" :class="val.is_selected==1?'img_border':''"/>
                                <span v-if="val.state=='1'" class="pic_ul_inside greenBtn">即将开始</span>
                                <span v-else-if="val.state=='2'" class="pic_ul_inside redBtn">正在进行</span>
                                <span v-else-if="val.state=='3'" class="pic_ul_inside grayBtn">已成交</span>
                                <span v-else-if="val.state=='4'" class="pic_ul_inside grayBtn">已流拍</span>
                                <span v-else-if="val.state=='5'" class="pic_ul_inside grayBtn">撤拍</span>
                                <span v-else-if="val.state=='6'" class="pic_ul_inside yellowBtn">暂停</span>
                                <span v-else-if="val.state=='7'" class="pic_ul_inside yellowBtn">等待拍卖师操作</span>


                                <el-tooltip effect="dark" :content=val.name placement="bottom">
                                    <p class="pic_ul_tit">{{val.name}}</p>
                                </el-tooltip>
                            </li>
                        </ul>
                    </div>
                    <i @click="go(-1)" class="el-icon-arrow-right right_btn"></i>
                </div>
            </div>
            <!-- <div class="tip-box">
                <i class="el-icon-message-solid"></i>
                <span>成交后，需向拍卖企业另付拍卖佣金，具体规则请联系拍卖企业</span>
            </div> -->
        </div>
        <p class="auc_mode">{{auctionData.mode=='1'?'同步拍':'网络拍'}}</p>
    </div>
</template>
<script>
import {lotsDetailSearch} from '@/api/interface'
export default{
    components:{
       
    },
    props:{
        auctionData:{
            type:Object,
            default () {
                return {};
            },
        },
        searchPic:{
            type:Array,
            default () {
                return [];
            },
        }
    },
    data() {
        return {
            input3:'',
            select:'',
            index: 0, //现在是第几张
            width: 0, //移动的长度
            keyWord: '',
        }
    },
    computed: {
      changePic() {
        return {
          transform: `translate3d(${this.width}px, 0, 0)`, //主要实现核心
        };
      },
      filterFruitList() {
        return this.searchPic.filter((item) => {
            return item.name.indexOf(this.keyWord) !== -1;
        })
      }
    },

    methods:{
        goActionLots(){
            this.$router.push(`/auction/detail?auctionId=${this.auctionData.id}`);
        },
        searchFilter(){
            // keyWord
            
            // console.log(this.searchPic)
        },
        go(direc) {
            if (direc == -1) {
            this.index = this.index >= this.searchPic.length - 6 ? 0 : this.index + 1;
            } else if (direc == 1) {
            this.index = this.index <= 0 ? this.searchPic.length - 6 : this.index - 1;
            }
            // console.log("index:", this.index);
            this.move(); //移动
        },
        move() {
            this.width = -116 * this.index;
            // console.log("width:", this.width);
        },
        onlyFilter(val){
            this.$emit('lotsAllData',val.id)
        },
    }
}
</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.auction_box{
    position: relative;
    background-color: #fff;
    .auc_mode{
        width: 60px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        // vertical-align: middle;
        top: 0;
        position: absolute;
        background: #FDA700;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
    }
    .auctionList{
        display: flex;
        align-items: center;
        padding: 22px 20px;
        border-radius: 6px;
        .msg{
            width: 30%;
            h3{
                cursor: pointer;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .phone{
                font-size: 10px;
                color: #666;
                margin-top: 20px;
            }
        }
        .search_pic{
            width: 70%;
            
            .search{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                .input-with-select {
                    width: 400px;
                    // position: absolute;
                    // right: 0;
                    .el-input-group__prepend {
                        background-color: #fff;
                    }
                }
            }
            .pic_list{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top:10px;
                padding: 5px;
                .pic_con{
                    width: 700px;
                    overflow:hidden;
                    .pic_ul{
                        display: flex;
                        height: 124px;
                        transition: 0.5s ease;
                        // object-fit: cover;
                        li{
                            padding: 5px;
                            position: relative;
                            img{
                                border-radius: 4px;
                                width: 106px; 
                                height: 80px;
                            }
                            .img_border{
                                border: 1px solid @base-color;
                            }
                            em{
                                width: 30px;
                                height: 16px;
                                background: rgba(51,51,51,.5);
                                font-size: 10px;
                                line-height: 16px;
                                top: 6px;
                                left: 6px;
                                z-index: 10000;
                                border-radius: 2px;
                                color: #fff;
                                position: absolute;
                                text-align: center;

                            }
                            .pic_ul_inside{
                                display: inline-block;
                                width: 107px;
                                height: 16px;
                                color: #fff;
                                font-size: 12px;
                                line-height: 16px;
                                cursor: pointer;
                                border-bottom-left-radius: 4px;
                                border-bottom-right-radius: 4px;
                                position: absolute;
                                text-align: center;
                                left: 5px;
                                bottom: 38px;

                            }
                            .pic_ul_tit{
                                // margin-top: 20px;.
                                width: 106px;
                                text-align: center;
                                position: absolute;
                                font-size: 12px;
                                height: 30px;
                                bottom: 0;
                                // --------
                                overflow: hidden;
                                text-overflow: ellipsis;
                                /* 将对象作为弹性伸缩盒子模型显示 */
                                display: -webkit-box;
                                /* 限制在一个块元素显示的文本的行数 */
                                /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
                                -webkit-line-clamp: 2;
                                /* 设置或检索伸缩盒对象的子元素的排列方式 */
                                -webkit-box-orient: vertical;
                            }
                        }
                    }
                }
                .left_btn{
                    font-size: 40px;
                    color: #ccc;
                }
                .right_btn{
                    font-size: 40px;
                    color: #ccc;
                }
            }
        }
    }
}




.el-select .el-input {
    width: 130px;
}

</style>
